<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { Toast } from 'vant';
const route = useRoute()
const router = useRouter()
const number = ref()
const password = ref()

const login = () => {
    const TOKEN = Date.now()
    window.localStorage.setItem('token', JSON.stringify(TOKEN))
    // router.replace({ path: (route.query.s)!})
    console.log(number.value);
    console.log(password.value);
}
</script>

<template>
    <div class="header">
        <div class="logo">
            <img src="../assets/images/icon_logo@2x.png" alt="">
        </div>
    </div>
    <div class="login-header">
        <div class="back" @click="router.go(-1)">
            <van-icon name="arrow-left" />
        </div>
        <div class="title">手机号快速登录</div>
        <div class="home" @click="router.push('/')">首页</div>
    </div>
    <div class="input">
        <input class="phone" type="text" placeholder="输入手机号" v-model="number">
        <input class="phone" type="password" placeholder="输入密码" v-model="password">
        <div class="btn" @click="router.push('/myinfo'), Toast.success('登陆成功'), login();">
            登录
        </div>
    </div>
</template>
<style scoped lang="scss">
.header {
    width: 100%;
    height: 40rem;
    display: flex;
    justify-content: space-between;

    .logo {
        width: 110rem;
        height: 20rem;
        margin-left: 20rem;

        img {
            width: 100%;
            height: 100%;
            margin-top: 20rem;
            transform: translateY(-50%);
        }
    }
}

.login-header {
    width: 345rem;
    height: 44rem;
    padding: 0 15rem;
    border-bottom: 1rem solid #ededed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #595550;

    .back {
        font-size: 22rem;
    }

    .title {
        font-size: 18rem;
    }

    .home {
        font-size: 15rem;
    }
}

.input {
    width: 345rem;
    height: 95rem;
    margin-top: 50rem;
    padding: 0 15rem;

    .phone {
        width: 325rem;
        height: 15rem;
        padding: 12.5rem 10rem;
        margin-bottom: 15rem;
        border: none;
        color: #595550;
        font-size: 16rem;
        line-height: 40rem;
        background-color: #f5f5f5;
        border-radius: 3rem;
    }

    .btn {
        width: 345rem;
        height: 40rem;
        background-color: #ed6460;
        border-radius: 3rem;
        text-align: center;
        line-height: 40rem;
        color: #fff;
        font-size: 16rem;
    }
}
</style>